<template>
  <div>
    <van-nav-bar title="影院列表" left-arrow @click-left="$router.back()" @click-right="$router.push('/search')">
      <template #left>
        <span>城市</span>
        <van-icon name="arrow-down" />
      </template>
      <template #right>
        <van-icon name="search" size="18" />
      </template>
    </van-nav-bar>
    <!-- 最外层div有固定高度 -->
    <div class="box" ref="scrollBoxRef">
      <!-- 有子容器 -->
      <ul>
        <!-- 单个项的数据超过了固定容器的高度 -->
        <!-- 
          之前是固定数据，所在一开始时它能够计算得到当前的元素的实际高度 
          现在的数据是通过ajax异步获取，所以在一开始时是没有高度的，原因是data中的数据源为空数组
          解决此问题：可以使用updated来声明组件
        -->
        <li v-for="item in cinemas" :key="item.cinemaId" @click="goCinemaDetail(item)">
          <div class="name">
            <div>{{ item.name }}</div>
            <div>￥25起</div>
          </div>
          <div class="address">
            <div>北京市西城区前门煤市街北京坊C1区，B1\B2层</div>
            <div>距离未知</div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
// 滚动的js类库
import BScroll from 'better-scroll'
// 影院列表数据
import { getCinemaListApi } from '@/api/cinemaApi'
export default {
  data() {
    return {
      bs: null,
      cinemas: [],
      page: 1,
    }
  },
  mounted() {
    // 初始化加载数据
    this.getCinemaList()
  },
  // 当前数据更新完成后，才会触发
  updated() {
    // vue中的dom渲染是异步的，为了确保它一定能获取到当前真实的dom
    this.$nextTick(() => {
      // console.log(document.documentElement.clientHeight - 50)
      this.bs = new BScroll(this.$refs.scrollBoxRef, {
        // 激活上滑动的事件监听
        pullUpLoad: true,
        // 激活下滑的事件监听
        pullDownRefresh: true,
        // 默认情况下使用bs后，它会禁止浏览器的点击事件
        click: true,
      })
      // 上拉刷新
      this.bs.on('pullingUp', () => {
        console.log('上拉刷新')
        this.getCinemaList(1)
        // 获取数据
        //本次pullup动作已经完成，继续准备下一次pullup
        this.bs.finishPullUp()
      })
      this.bs.on('pullingDown', () => {
        console.log('下拉刷新')
        this.getCinemaList()
        // 获取数据
        //本次pulldown动作已经完成，继续准备下一次pulldown
        this.bs.finishPullDown()
      })
    })
  },
  methods: {
    goCinemaDetail(id = 1) {
      console.log(id)
    },
    async getCinemaList(pos = 0) {
      let page = this.page
      let ret = await getCinemaListApi(page)
      if (ret.data.cinemas.length > 0) {
        if (pos === 0) {
          // 从头添加
          this.cinemas = [...ret.data.cinemas, ...this.cinemas]
        } else {
          this.cinemas = [...this.cinemas, ...ret.data.cinemas]
        }
        this.page++
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.box {
  /* 使用better-scroll实现滚动，一定要外层的容器有一个固定的高度,计算属性 */
  height: calc(100vh - 96px);
  ul {
    li {
      display: block;
      padding: 10px;
      &::after {
        display: block;
        margin-top: 10px;
        content: '';
        width: 200%;
        height: 200%;
        border-bottom: 1px solid #191a1b;
        transform: scale(0.5);
        transform-origin: 0 0;
      }
      .name {
        display: flex;
        justify-content: space-between;
        margin-bottom: 10px;
        div:nth-of-type(1) {
          color: #191a1b;
          font-size: 15px;
        }
        div:nth-of-type(2) {
          color: #ff5f16;
          font-size: 15px;
        }
      }
      .address {
        display: flex;
        justify-content: space-between;
        div {
          color: #797d82;
          font-size: 12px;
        }
      }
    }
  }
}
</style>